{% extends "qa_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "陕西5A景区问答对数据管理系统" %}</title>
    {{ block.super }}
{% endblock %}

{% block content %}
<div class="page-content" style="min-width:80%;">
    <ol class="breadcrumb detail-breadcrumb">
        <li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">人员与权限管理</span></li>
        <li><span href="{{ SITE_URL }}award">数据提交方一览</span></li>
    </ol>

    <div class="bk-panel bk-demo">
        <div class="bk-panel-header">
            <div class="bk-form bk-inline-form">
                <div class="bk-form-item">
                    <label class="bk-label" style="width:150px;">操作景区</label>
                    <div class="bk-form-content" style="margin-left:150px;">
                        <select name="scenic_area" class="bk-form-select">
                            <option value="宝塔山">宝塔山</option>
                            <option value="大慈恩寺+大雁塔">大慈恩寺+大雁塔</option>
                            <option value="大明宫国家遗址公园">大明宫国家遗址公园</option>
                            <option value="大唐芙蓉园">大唐芙蓉园</option>
                            <option value="法门寺">法门寺</option>
                            <option value="华清宫">华清宫</option>
                            <option value="华山风景名胜区">华山风景名胜区</option>
                            <option value="黄帝陵">黄帝陵</option>
                            <option value="黄河壶口瀑布旅游区">黄河壶口瀑布旅游区</option>
                            <option value="金丝峡景区">金丝峡景区</option>
                            <option value="赳赳大秦">赳赳大秦</option>
                            <option value="秦始皇陵博物院+兵马俑">秦始皇陵博物院+兵马俑</option>
                            <option value="太白山国家森林公园">太白山国家森林公园</option>
                            <option value="西安碑林博物馆">西安碑林博物馆</option>
                            <option value="西安城墙">西安城墙</option>
                            <option value="延安革命纪念馆">延安革命纪念馆</option>
                            <option value="杨家岭革命旧址">杨家岭革命旧址</option>
                            <option value="枣园革命旧址">枣园革命旧址</option>
                            <option value="长安十二时辰主题街区">长安十二时辰主题街区</option>
                            <option value="中共中央西北局旧址">中共中央西北局旧址</option>
                            <option value="黄河乾坤湾景区">黄河乾坤湾景区</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br><br>

    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">Submitter账号</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" name="submitter_account" placeholder="请输入Submitter账号">
            </div>
        </div>

        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">改动类型</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <div class="bk-button-group">
                    <button type="button" class="bk-button bk-default is-outline" onclick="selectButton(this)">
                        <span>新增</span>
                    </button>
                    <button type="button" class="bk-button bk-default is-outline" onclick="selectButton(this)">
                        <span>改动</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 新增问题与回答 -->
        <div class="bk-form-item" id="additionalFields" style="display:none;">
            <label class="bk-label" style="width:150px;">新增问题</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" name="new_question" placeholder="请输入新增问题">
            </div>
        </div>
        <div class="bk-form-item" id="additionalFields" style="display:none;">
            <label class="bk-label" style="width:150px;">新增回答</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" name="new_answer" placeholder="请输入新增回答">
            </div>
        </div>

        <!-- 改动类型 -->
        <div class="bk-form-item" id="changeFields" style="display:none;">
            <label class="bk-label" style="width:150px;">改动类型</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="change_part" class="bk-form-select">
                    <option value="问题">问题</option>
                    <option value="回答">回答</option>
                </select>
            </div>
        </div>

        <!-- 搜索问答对 -->
        <div class="bk-form-item" id="searchFields" style="display:none;">
            <label class="bk-label">搜索问/答：</label>
            <div class="bk-form-content">
                <input type="text" class="bk-form-input" placeholder="请输入问答对关键字" style="width:350px;" id="search_query">
                <a class="bk-text-button bk-primary" title="搜索" onclick="searchQaPair()">
                    <i class="bk-icon icon-search"></i>搜索
                </a>
            </div>
        </div>

        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存" href="{% url 'submit_ticket' %}">
                    <span>保存</span>
                </a>
                <a class="bk-button" href="{% url 'submit_ticket' %}" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>
    </form>
</div>

<script>
    function toggleFields() {
        var changeType = document.querySelector('.bk-button-group .bk-button.is-selected').textContent.trim();
        var additionalFields = document.getElementById('additionalFields');
        var changeFields = document.getElementById('changeFields');
        var searchFields = document.getElementById('searchFields');
        if (changeType === '新增') {
            additionalFields.style.display = 'block';
            changeFields.style.display = 'none';
            searchFields.style.display = 'none';
        } else if (changeType === '改动') {
            additionalFields.style.display = 'none';
            changeFields.style.display = 'block';
            searchFields.style.display = 'block';
        } else {
            additionalFields.style.display = 'none';
            changeFields.style.display = 'none';
            searchFields.style.display = 'none';
        }
    }

    function selectButton(button) {
        var buttons = document.querySelectorAll('.bk-button-group .bk-button');
        buttons.forEach(function (btn) {
            btn.classList.remove('is-selected');
        });
        button.classList.add('is-selected');
        toggleFields();
    }

    function searchQaPair() {
        const query = document.getElementById('search_query').value;
        // 使用AJAX请求模糊查询
        fetch('/search_qa_pair/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}',
            },
            body: JSON.stringify({ query: query })
        })
        .then(response => response.json())
        .then(data => {
            if (data.qa) {
                // 显示搜索结果
                alert(`问题: ${data.qa.question} \n回答: ${data.qa.answer}`);
            } else {
                alert('未找到相关问题');
            }
        });
    }
</script>

{% endblock %}
